<template>
  <router-view></router-view>
  <van-pull-refresh v-model="loading" @refresh="onRefresh">
    <div class="container">
      <div class="container-top">
        <img class="top-bk-icon" src="../assets/oa_main_top_bk.png" alt="">
        <div class="user-info">
          <div class="user-name">{{appUser.userName}}</div>
          <div class="user-department">{{departName}}</div>
        </div>
        <img class="user-icon" :src="appUser.headImg" alt="" @click="userIconClicked">
        <div class="approve">
          <div class="approve-item" v-for="(item, index) in approveItems" :key="index">
            <div class="approve-item-des">{{item.des}} <span v-if="item.des > 0"></span></div>
            <div class="approve-item-title">{{item.title}}</div>
          </div>
        </div>
      </div>
      <ul>
        <li class="cell" v-for="(item, index) in items" :key="index">
          <div class="cell-title">{{item.itemTitle}}</div>
          <div class="cell-function">
            <div class="function-item" v-for="(itemInfo, infoIndex) in item.childItems" :key="infoIndex" @click="functionItemClicked(itemInfo)">
              <img class="function-item-image" :src="itemInfo.childImg" alt="">
              <div class="function-item-title">{{itemInfo.childTitle}}</div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </van-pull-refresh>

</template>

<script>
// ref指向this 因为setup中还不能访问data和methods 所以此方法内this为undefined 这里ref就起到作用了
import {ref} from 'vue'
// 先导入本地资源文件
import itemImage from '../assets/app_item_0.png'

// 路由进入该界面 有参数传递 接收参数 如果有参数的话，在接收页面引入API–useRoute api不要搞错
// import { useRoute } from 'vue-router'
import {Http} from "@/utils/apiManager";
import {klGetUserAppMenuList} from "@/utils/urlConfig";
import {getUserInfo} from "@/model/appUser";
import {showToast} from "vant";
import router from "@/router";

export default {
  name: "AppMain",
  components:{

  },
  props:{

  },
  data(){
    return {
      items:[],
      approveItems:[],
      // 用户对象
      appUser:{

      },
      departName:'',

      // 是否处于加载中
      loading:false,
    }
  },
  // 界面被创建前
  beforeCreate() {

  },
  // setup函数是处于 生命周期函数 beforeCreate 和 Created 两个钩子函数之间的函数
  // 也就说在 setup函数中是无法 使用 data 和 methods 中的数据和方法的
  // 在setup函数中定义的变量和方法最后都是需要 return 出去的 不然无法再模板中使用
  setup() {
    const user = getUserInfo()
    console.log('setup缓存中读取的用户信息', user)
    window.loginUser = user

    const count = ref(0);
    const isLoading = ref(false);
    const refreshData = () => {
      setTimeout(() => {
        showToast('刷新成功');
        // 想要值变更 必须.value
        isLoading.value = false;
        count.value++;
      }, 1000);
    };

    // 在setup函数中定义的变量和方法最后都是需要 return 出去的 不然无法在模板中使用
    return {
      count,
      isLoading,
      refreshData,
    };
  },
  // 界面被创建
  created() {

  },

  // 界面加载
  mounted() {
    //.在接收页面定义变量route，获取传过来的变量 通过query对象带参数
    // const route = useRoute()
    // let userId = route.query.userId;
    // let userName = decodeURI(route.query.userName);
    // console.log('接收参数userId', userId, 'userName', userName)

    this.loadNewData()
  },

  // 所有的自定义方法均在此对象里面
  methods:{
    /**
     * 下拉刷新方法
     */
    onRefresh() {
      this.loadNewData()
    },

    loadNewData () {

      let user = getUserInfo()
      console.log('缓存中读取的用户信息', user)
      this.appUser = user

      // 层级名称
      const departName = user.departName
      const arr = departName.split('-')
      if (arr.length > 0) {
        this.departName = arr[arr.length - 1]
      }

      const param = {
        deviceNum: user.uuid,
        userId: user.userId
      }
      console.log('当前参数', param)

      Http.post(klGetUserAppMenuList, Http.appModuleType.moduleTypeOA, param).then(res => {
        const { code, msg, data } = res
        // 停止刷新
        if (code == 0) {
          this.dealDataWithResult(data)
        } else  {
          showToast(msg)
        }
      })

      // 每一行里面小功能模块信息源数据 模拟数据
      const isTest = false
      if (isTest) {
        const itemInfo = {
          childTitle:'采购申请',
          childImg:itemImage
        }

        // 每一行的数据源数据
        const temp = {
          itemTitle: '财务管理',
          items:[
            itemInfo,
            itemInfo,
            itemInfo,
            itemInfo,
            itemInfo,
            itemInfo
          ]
        }
        const arr = [temp, temp, temp]
        this.items = arr
      }
    },

    dealDataWithResult(result) {
      console.log('首页数据', result)
      this.loading = false
      showToast('刷新成功')

      const mySendItem = {
        title:"我发起的",
        des:result.initiateCount,
      }

      const waitItem = {
        title:"待我审批",
        des:result.approvalCount,
      }

      const copyItem = {
        title:"待我审批",
        des:result.copyCount,
      }
      const arr = [mySendItem, waitItem, copyItem]
      this.approveItems = arr

      // 功能按钮数据
      const items = result.items
      this.items = items
    },

    // 功能按钮点击事件
    functionItemClicked(item) {
      console.log('item', item)
      showToast(item.childTitle)
    },

    userIconClicked() {
      router.push('/myInfo')
    },
  }
}
</script>

<style scoped>
body, .container {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  background-color: #f8f8f8;
}

ul, li {
  list-style: none;
}

.cell {
  padding: 25px 15px;
  box-sizing: border-box;
  background-color: white;
  margin-bottom: 7px;
}

.cell-title {
  color: #131313;
  font-size: 16px;
  font-weight: 600;
  text-align: left;
}

.cell-function {
  margin-top: 20px;
  display: flex;
  width: 100%;
  flex-flow: row wrap;
}

.function-item {
  width: 25%;
  padding-bottom: 10px;
  box-sizing: border-box;
}

.function-item-image {
  width: 48px;
  height: 48px;
  display: block;
  margin: 0 auto;
}

.function-item-title {
  margin-top: 12px;
  text-align: center;
  color: #131313;
  font-size: 13px;
}

.top-bk-icon {
  width: 100%;
  height: 180px;
}

.container-top {
  position: relative;
}

.user-info {
  position: absolute;
  top: 50px;
  left: 17px;
}

.user-name {
  color: white;
  font-size: 23px;
  text-align: left;
  font-weight: 900;
  margin-bottom: 8px;
}

.user-department {
  color: white;
  font-size: 13px;
  text-align: left;
}

.user-icon {
  position: absolute;
  top: 50px;
  right: 15px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

/*顶部我发起 待我审批 抄送我的数据*/
.approve {
  position: absolute;
  left: 15px;
  right: 15px;
  height: 67px;
  bottom: 0;
  background-color: white;
  box-shadow: 0px 0px 30px 0px rgba(2, 88, 207, 0.3);
  border-radius: 15px;
  display: flex;
  flex-flow: row wrap;
}

.approve-item {
  width: 33%;
  box-sizing: border-box;
  /*垂直居中*/
  display: block;
  margin: auto 0;
}

.approve-item-des {
  color: #131313;
  /*font-size和line-height搭配使用 则高度显示更加精准 1：1比例*/
  font-size: 20px;
  line-height: 1;
  text-align: center;
  font-weight: 900;
  margin-bottom: 9px;
  position: relative;
}

/*定位实现 在字体右上角显示红点*/
.approve-item-des span {
  display:block;
  background:#f00;
  border-radius:50%;
  width:5px;
  height:5px;
  top:0px;
  right:50px;
  position:absolute;
}

.approve-item-title {
  color: #131313;
  font-size: 14px;
  line-height: 1;
  text-align: center;
}



</style>
